<template>
	<view class="uni-page">
		<view class="header">
			<view class="left-box">
				<view class="account">
					用户名：{{ user_info.username }}
				</view>
				<view class="money">
					余额：{{ user_info.money }}
				</view>
			</view>
			<view class="bottom-box">
				<view class="headerItem" v-for="item in userItems" @click="handleItem(item.text)">
					<uni-icons :type="item.icon" :size="30" color="#777" />
					<text class="text">{{item.text}}</text>
				</view>
			</view>

		</view>

		<uni-grid class="grid-box" :column="3" :highlight="true" :showBorder='false'>
			<uni-grid-item v-for="(item, index) in items" :index="index" :key="index" @click="to(item.url)">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons :type="item.icon" :size="30" color="#777" />
					<text class="text">{{item.text}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-list>
			<uni-list-item :show-extra-icon="true" showArrow :note="user_info.qianbaodz" @click="onClick" title="钱包地址"
				link />
			<uni-list-item :show-extra-icon="true" showArrow :note="user_info.youxiang" title="邮箱"
				@click="handleEmailDialog" link />
			<uni-list-item :show-extra-icon="true" showArrow note="******" title="交易密码" @click="openJyDialog" link />
			<uni-section class="info-item" title="开通二次验证" sub-title="开通二次验证可以保障你的资金安全， 否则被盗号所产生的一切问题自行负责">
				<template v-slot:right>
					<switch @change="switchYzChange" :checked="user_info.ktecyz==1?true:false"
						style="transform:scale(0.7)" />
				</template>
			</uni-section>
		</uni-list>



		<uni-section class="info-item" title="自动下单
">
			<template v-slot:right>
				<text>{{user_info.zidongxd==1?'已开通':'关闭'}}</text>
			</template>
		</uni-section>
		<uni-section class="info-item" title="激活码：" @click="copy(user_info.jhmno)">
			<template v-slot:right>
				<view class="jhm">
					{{user_info.jhmno}}
				</view>
			</template>
		</uni-section>
		<uni-section class="info-item" title="开通时间：
		">
			<template v-slot:right>
				<view class="jhm">
					{{user_info.kstime}}
				</view>
			</template>
		</uni-section>
		<uni-section class="info-item" title="到期时间：
		">
			<template v-slot:right>
				<view class="jhm">
					{{user_info.dqtime}}
				</view>
			</template>
		</uni-section>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog message="成功消息" :before-close="true" @close="close" @confirm="confirm">
				<image :src="ewmurl" mode=""></image>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="充值数量（USDT）" :value="100" placeholder="充值数量（USDT）"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 地址 -->
		<uni-popup ref="dzDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="钱包地址" placeholder="请填写TRC20地址,因地址问题币没到账后果自负"
				@confirm="dialogdzInputConfirm">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="emailDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="邮箱" placeholder="请填写邮箱"
				@confirm="dialogemailInputConfirm">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="jyDialog" type="dialog" background-color="#fff">
			<view class="form-box">
				<uni-forms :modelValue="formData">
					<uni-forms-item label="交易密码" name="name">
						<uni-easyinput type="text" v-model="formData.gugeyzm" placeholder="请输入交易密码" />
					</uni-forms-item>
					<uni-forms-item label="确认交易密码" name="name">
						<uni-easyinput type="text" v-model="formData.jymima" placeholder="请输入 确认交易密码" />
					</uni-forms-item>
					<uni-forms-item label="输入二次验证密码" name="name">
						<uni-easyinput type="text" v-model="formData.newjymima" placeholder="请输入 输入二次验证密码" />
					</uni-forms-item>
				</uni-forms>
				<button @click="submitForm" type="primary">提交</button>
			</view>
		</uni-popup>
		<!-- 邀请码 -->
	</view>

</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		getUserInfoAPI,
		setEmailAPI,
		setjYAPI,
		setQbAPI,
		setYzAPI,
		UserRechargeAPI
	} from '../../apis/user';
	import {
		useMemberStore,
		useTokenStore
	} from '../../stores';
	// 获取会员信息
	const tokenStore = useTokenStore()
	const memberStore = useMemberStore()
	const user_info = memberStore.profile
	const formData = ref({
		gugeyzm: '',
		jymima: '',
		newjymima: ''
	})
	const ewmurl = ref('')
	const popup = ref(null);
	const inputDialog = ref()
	const dzDialog = ref()
	const emailDialog = ref()
	const jyDialog = ref()
	const submitForm = () => {
		const data = setjYAPI(formData)
		uni.showToast({
			title: data.msg,
			icon: 'success'
		})
	}
	const openJyDialog = () => {
		jyDialog.value.open('top')
	}
	// 修改邮箱
	const handleEmailDialog = () => {
		emailDialog.value.open()
	}
	// 修改地址
	const onClick = () => {
		dzDialog.value.open()
	}
	const dialogdzInputConfirm = async (e) => {
		if (!e) {
			uni.showToast({
				title: '请输入合法数据！',
				icon: 'error'
			})
			return
		}
		const data = await setQbAPI({
			qbdz: e
		})
		uni.showToast({
			title: data.msg,
			icon: 'success'
		})
		memberStore.profile.qianbaodz = e
	}
	const dialogemailInputConfirm = async (e) => {
		if (!e) {
			uni.showToast({
				title: '请输入合法数据！',
				icon: 'error'
			})
			return
		}

		const data = await setEmailAPI({
			youxiang: e
		})
		uni.showToast({
			title: data.msg,
			icon: 'success'
		})
		memberStore.profile.youxiang = e
	}
	// 充值
	const recharge = () => {
		popup.value.open()
	}

	const dialogInputConfirm = (async (e) => {
		if (e == 0 || !/^\d+$/.test(e)) {
			uni.showToast({
				title: '请输入合法数据！',
				icon: 'error'
			})
		} else {
			const {
				data
			} = await UserRechargeAPI()
			uni.navigateTo({
				url: `/pages/recharge/recharge?money=${e}&qrcode=${data.img}&qianbaodz=${data.qianbaodz}&qbid=${data.id}`
			})
		}
	})
	const handleItem = (type => {
		if (type == '充值') {
			inputDialog.value.open()
		} else {
			uni.navigateTo({
				url: `/pages/withdraw/withdraw`
			})
		}
	})

	onMounted(() => {
		//判断是否登录
		if (!tokenStore.token) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	})
	const copy = (value) => {
		uni.setClipboardData({
			data: value,
			success: function() {
				//调用方法成功
				console.log('success');
			}
		})
	}
	const to = (url) => {
		uni.navigateTo({
			url
		})
	}
	const confirm = () => {
		popup.value.close()
	}
	const close = () => {
		popup.value.close()
	}
	// 开通二次验证
	const switchYzChange = (e) => {
		let is_open = user_info.ktecyz == 1 ? 0 : 1
		uni.showModal({
			title: `${is_open ? '开通' : '关闭'}二次验证`,
			content: `确认要${is_open ? '开通' : '关闭'}二次验证吗？`,
			success: async function(res) {
				if (res.confirm) {
					const res = await setYzAPI({
						iskt: e.detail.value
					})
					if (res.code == 1) {
						// const {
						// 	data
						// } = await getUserInfoAPI()
						memberStore.setYz(is_open)
						// 存在本地
						// memberStore.setProfile(is_open)
						console.log(is_open);
						is_open == 1 && (popup.value.open(), ewmurl.value = res.data.ewmurl)
						uni.showToast({
							title: `${is_open ? '开通' : '关闭'}二次验证成功`,
							icon: 'none',
							content: res.msg
						})
					}
				} else {

				}
			}
		})

	}
	const userItems = ref([{
			'icon': 'wallet',
			'text': "充值"
		},
		{
			'icon': 'redo',
			'text': "提现"
		},
	])
	const items = ref([

		{
			'icon': 'list',
			'text': "充值记录",
			'url': '/pages/recharge_log/recharge_log'
		},
		{
			'icon': 'more',
			'text': "提现记录",
			'url': '/pages/withdraw_log/withdraw_log'
		},
		{
			'icon': 'bars',
			'text': "代币流水",
			'url': '/pages/tokens_log/tokens_log'
		},
		{
			'icon': 'folder-add',
			'text': "购买Token号",
			'url': '/pages/token/token'
		},
		{
			'icon': 'gear-filled',
			'text': "设置代理",
			'url': '/pages/set_proxy/set_proxy'
		},
		{
			'icon': 'map-pin',
			'text': "打单统计",
			'url': '/pages/order_stat/order_stat'
		},
	])
	// 自动下单

	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确认退出登录吗？',
			success: function(res) {
				if (res.confirm) {
					tokenStore.clearToken()
					memberStore.clearProfile()
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
		})

	}
</script>

<style lang="scss">
	.uni-page {
		background: #F2F5F7;
		padding: 20upx;

		.form-box {
			padding: 20upx;
		}

		.image {
			width: 24upx;
			height: 24upx;
		}

		.text {
			font-size: 28upx;
		}

		.grid-box {
			padding: 10upx 0;

		}

		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;

		}

		.bottom-box {
			padding: 20upx;

			.title {
				padding: 20upx;
			}

			.content {
				padding: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.btn-sub {
				margin: 20upx;
			}

			margin-bottom: 50upx;
		}

		.header {
			border-radius: 20upx;
			background: #fff;
			padding: 20upx;

			.left-box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20upx;

				.account {}



				// padding: 10upx 0;
			}

			.bottom-box {
				padding: 20upx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.headerItem {
					display: flex;
					flex-direction: column;

				}
			}
		}

		.info-item {
			border-bottom: #F5F5F5 solid 1upx;
		}

		.logout {
			margin-top: 20upx;
		}
	}
</style>